<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="$router.back()" />
    <div class="logoBox">
      <img src="https://wap.lexuemiao.com/img/logo@2x.a4702f31.png" alt="" />
    </div>
    <van-cell-group inset class="form">
      <van-field
        center
        clearable
        v-model="loginParams.mobile"
        left-icon=""
        placeholder="请输手机号"
        @input="jy"
      >
      </van-field>
      <van-field
        :type="sx ? 'text' : 'password'"
        :right-icon="sx ? 'eye-o' : 'closed-eye'"
        @click-right-icon="isShow"
        v-model="loginParams.user_pass"
        left-icon=""
        placeholder="请输入密码"
      />
      <van-field
        center
        clearable
        v-model="loginParams.captcha"
        left-icon=""
        placeholder="请输图片验证码"
      >
        <template #right-icon>
          <img class="imgCode" :src="tuImg?.img" alt="" @click="getImg" />
        </template>
      </van-field>
    </van-cell-group>
    <div class="btnbox">
      <van-button
        class="btn"
        size="normal"
        color="#f15a24"
        type="primary"
        @click="dlLogin"
        >登录</van-button
      >
    </div>
    <div class="tishi">
      <p>忘记密码?</p>
      <p class="zc" @click="toZc">注册/验证码登录</p>
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getImgCodeApi, getLoginApi } from '../http/api.js'
import { useCounterStore } from '@/stores/counter'
import { Toast } from 'vant'
export default {
  setup(props) {
    const store = useCounterStore()
    const router = useRouter()
    const data = reactive({
      tuImg: '',
      loginParams: {
        mobile: '', //手机号
        captcha: '', //图片验证码
        user_pass: '', //用户密码
        device_type: 2 //设备号 默认
      },
      sx: false
    })
    onMounted(() => {
      getImg()
    })
    // 去注册
    const toZc = () => {
      router.push('/zc')
    }
    // 图片请求
    const getImg = async () => {
      const res = await getImgCodeApi()
      console.log('图片', res)
      data.tuImg = res.url
    }
    // 校验手机号是否正确输入
    const jy = () => {
      if (data.loginParams.mobile == '') {
        Toast.error('手机号码不能为空哦!')
        return false
      }
      let sj = /^1[3-9][0-9]{9}$/
      if (!sj.test(data.loginParams.mobile)) {
        Toast.fail('手机号码格式不正确哦!')
        return false
      }
    }
    // 登录
    const dlLogin = async () => {
      if (data.loginParams.mobile == '') {
        Toast.fail('手机号码不能为空哦!')
        return false
      }
      let sj = /^1[3-9][0-9]{9}$/
      if (!sj.test(data.loginParams.mobile)) {
        Toast.fail('手机号码格式不正确哦!')
        return false
      }
      if (data.loginParams.captcha == '') {
        Toast.fail('图形验证码不能为空哦!')
        return false
      }
      const res = await getLoginApi(data.loginParams)
      console.log('登录返回', res)
      store.addToken(res)
      router.push(
        `/my?user_nickname=${res.user_nickname}&avatar=${res.avatar}&id=${res.id}`
      )
      data.loginParams = {
        mobile: '', //手机号
        captcha: '', //图片验证码
        user_pass: '', //用户密码
        device_type: 2 //设备号 默认
      }
    }
    const isShow = () => {
      data.sx = !data.sx
    }
    return {
      ...toRefs(data),
      toZc,
      getImg,
      dlLogin,
      isShow,
      jy
    }
  }
}
</script>
<style lang="scss" scoped>
.logoBox {
  padding-top: 100px;
  img {
    display: block;
    margin: auto;
    width: 340px;
    height: 110px;
    margin-bottom: 100px;
  }
}
.form {
  img {
    width: 180px;
    height: 60px;
  }
}
.btnbox {
  margin-top: 80px;
  padding: 0 40px;
  box-sizing: border-box;
  .btn {
    width: 100%;
  }
}
.tishi {
  display: flex;
  justify-content: space-between;
  padding: 20px 60px;
  font-size: 12px;
  color: #ccc;
  .zc {
    color: #f18d00;
  }
}
</style>
